<template>
  <div id="app">
    <h1>---------app的内容-----------</h1>

    <h3>用户商品:{{$store.getters.userGoods}}</h3>

    <!-- 展示vip商品 price > 100-->
    <h2>vip商品的列表:</h2>

    <ul>
      <li v-for="(item,index) in $store.getters.vipGoods" :key="index">{{item}}</li>
    </ul>

    <!-- 展示hot商品 price > 100 && num > 50-->
    <h2>hot商品的列表:</h2>

    <ul>
      <li v-for="(item,index) in $store.getters.hotGoods" :key="index">{{item}}</li>
    </ul>

    <h2>商品数量:{{$store.state.count}}</h2>

    <ul>
      <li v-for="(item,index) in $store.state.goods" :key="index">{{item}}</li>
    </ul>

    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    
    <home />
  </div>
</template>

<script>
import Home from "@/components/Home"
export default {
  name: 'App',
  computed:{
    // price > 100的商品
    vipGoods(){
      // 编程思维: 伪代码
      // 筛选数据: 
      //1. 获取数组
      const goods = this.$store.state.goods;
      const arr = [];
      //2. 循环遍历
      for(let i = 0; i< goods.length; i++){
        //3. 判断条件 price > 100
        if(goods[i].price > 100){
          arr.push(goods[i]);
        }
      }
      return arr;
    }
  },
  methods:{
      add(){
          this.$store.commit("increment");
      },
      sub(){
          this.$store.commit("decrement");
      },
      addCount(count){
        // 常规写法
        // this.$store.commit("addCount", count);

        //特殊写法
        this.$store.commit({
          type:"addCount",
          count
        });
      }
  },
  components:{
    Home
  },
  data(){
    return {
      count:1
    }
  }
}
</script>

<style>

</style>
